<template>
  <div class="login-box df">
    <div class="login-ctx df fdc jcc">
      <p class="fs-20 bold font333 login-title pdb-32">在线巡课平台</p>
      <a-form layout="horizontal" :model="formInline" @submit.prevent="handleSubmit">
        <a-form-item>
          <a-input v-model:value="formInline.account" size="large" placeholder="请输入账号">
            <template #prefix>
              <MobileOutlined type="user" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            v-model:value="formInline.password"
            size="large"
            type="password"
            placeholder="请输入密码"
            autocomplete="new-password"
          >
            <template #prefix>
              <lock-outlined type="user" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-radio-group name="radioGroup" v-model:value="formInline.group">
            <a-radio :value="1">教职工</a-radio>
            <a-radio :value="2">学生</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" size="large" :loading="loading" block
            >登录
          </a-button>
          <div class="pdb-32 pdt-24 df">
            <a-checkbox v-model:checked="formInline.checked">同意并遵守</a-checkbox>
            <span class="blue pointer">《服务条款》</span> 和
            <span class="blue pointer">《隐私条款》</span>
          </div>
        </a-form-item>
      </a-form>
    </div>
    <div class="df jcc img-outer">
      <div class="login-img"></div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, onMounted } from 'vue'
  import { message } from 'ant-design-vue'
  import { MobileOutlined, LockOutlined } from '@ant-design/icons-vue'
  import md5 from 'blueimp-md5'
  // ~@/assets/logo.png
  import { useRoute, useRouter } from 'vue-router'
  import { useStore } from '@/store'

  import { SvgIcon } from '@/components/svg-icon'

  export default defineComponent({
    name: 'Login',
    components: { MobileOutlined, LockOutlined, SvgIcon },
    setup() {
      const state = reactive({
        loading: false,
        formInline: {
          account: '',
          password: '',
          group: 1,
          checked: false,
        },
      })

      const store = useStore()
      const router = useRouter()
      const route = useRoute()

      const handleSubmit = async () => {
        const { account, password } = state.formInline
        if (account.trim() == '' || password.trim() == '') {
          return message.warning('账号或密码不能为空！')
        }
        // message.loading('登录中...', 0)
        state.loading = true
        console.log(state.formInline)
        const params = {
          account,
          password,
          isUserLogin: true,
        }
        params.password = md5(password)
        const { code, message: msg } = await store.dispatch('user/login', params).finally(() => {
          state.loading = false
          // message.destroy()
        })
        if (code == '10000') {
          const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
          message.success('登录成功！')
          router.replace(toPath).then((_) => {
            if (route.name == 'login') {
              router.replace('/')
            }
          })
        } else {
          // message.info(msg || '登录失败')
        }
      }

      onMounted(() => {})
      return {
        ...toRefs(state),
        handleSubmit,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .login-box {
    // background: url('~@/assets/images/login-bg.png') no-repeat center center;
    // background-size: 100%;
    height: 100vh;
    justify-content: space-between;
    align-items: center;
    background-color: #5066e1;
    .img-outer {
      width: calc(100vw - 400px);
    }
    .login-img {
      width: 600px;
      height: 600px;
      background: url('~@/assets/images/login-bg.png') no-repeat center center;
      background-size: 100%;
      border-radius: 50%;
    }
    .login-title {
      // padding-top: 125px;
      text-align: center;
    }
    .login-ctx {
      width: 400px;
      height: 100%;
      background-color: #fff;
      padding: 0 40px;
      // opacity: 0;
    }
    :deep(.ant-form) {
      .ant-col {
        width: 100%;
      }

      .ant-form-item-label {
        padding-right: 6px;
      }
    }
  }
</style>
